<template>
  <AdminLayout>
    <div class="admin-container">
      <div class="page-header">
        <h1>系统设置</h1>
        <p class="page-description">管理系统的各项配置</p>
      </div>

      <!-- 标签切换 -->
      <div class="tab-container">
      <button 
        class="tab-button"
        :class="{ active: activeTab === 'language' }"
        @click="switchTab('language')"
      >
        语言设置
      </button>
      <button 
        class="tab-button"
        :class="{ active: activeTab === 'admin' }"
        @click="switchTab('admin')"
      >
        管理员账号
      </button>
      <button 
        class="tab-button"
        :class="{ active: activeTab === 'dashboard' }"
        @click="switchTab('dashboard')"
      >
        仪表盘配置
      </button>
      </div>

      <!-- 内容区域 -->
      <div class="content-wrapper">
        <!-- 语言设置 -->
        <div v-if="activeTab === 'language'" class="settings-section">
          <h3>系统语言</h3>
          <p class="section-description">选择系统界面显示的语言</p>
          
          <div class="language-options">
            <div 
              v-for="lang in availableLanguages"
              :key="lang.code"
              class="language-option"
              :class="{ active: currentLanguage === lang.code }"
              @click="changeLanguage(lang.code)"
            >
              <div class="language-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="language-info">
                <h4>{{ lang.name }}</h4>
                <p>{{ lang.nativeName }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 管理员账号 -->
        <div v-if="activeTab === 'admin'" class="settings-section">
          <div class="section-header">
            <h3>管理员账号</h3>
            <p class="section-description">管理系统管理员账号</p>
            <button class="primary-button" @click="openAddAdminModal">
              添加管理员
            </button>
          </div>

          <div class="admin-accounts">
            <div class="admin-item header">
              <div class="admin-info">用户名</div>
              <div class="admin-status">状态</div>
              <div class="admin-actions">操作</div>
            </div>
            
            <div 
              v-for="admin in adminAccounts"
              :key="admin.username"
              class="admin-item"
            >
              <div class="admin-info">
                <span class="username">{{ admin.username }}</span>
                <span v-if="admin.isDefault" class="default-badge">默认</span>
              </div>
              <div class="admin-status">
                <span class="status-indicator" :class="admin.active ? 'active' : 'inactive'"></span>
                <span>{{ admin.active ? '活跃' : '禁用' }}</span>
              </div>
              <div class="admin-actions">
                <button class="secondary-button" @click="openEditAdminModal(admin)">
                  编辑
                </button>
                <button 
                  class="danger-button"
                  @click="confirmDeleteAdmin(admin)"
                  :disabled="admin.isDefault"
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 仪表盘配置 -->
        <div v-if="activeTab === 'dashboard'" class="settings-section">
          <h3>仪表盘配置</h3>
          <p class="section-description">自定义仪表盘显示内容</p>
          
          <div class="dashboard-settings">
            <!-- 背景颜色 -->
            <div class="setting-group">
              <label>背景颜色</label>
              <div class="color-picker">
                <input 
                  type="color" 
                  v-model="dashboardBackgroundColor"
                  @input="updateDashboardBackgroundColor"
                >
                <input 
                  type="text" 
                  v-model="dashboardBackgroundColor"
                  @input="updateDashboardBackgroundColor"
                >
              </div>
            </div>

            <!-- 暗黑模式 -->
            <div class="setting-group">
              <label class="checkbox-label">
                <input 
                  type="checkbox" 
                  v-model="darkMode"
                  @change="toggleDarkMode"
                >
                <span>启用暗黑模式</span>
              </label>
            </div>

            <!-- 组件配置 -->
            <div class="setting-group">
              <label>仪表盘组件</label>
              <div class="dashboard-components">
                <div 
                  v-for="component in dashboardComponents"
                  :key="component.id"
                  class="component-item"
                  :class="{ disabled: !component.enabled }"
                >
                  <div class="component-info">
                    <h4>{{ component.title }}</h4>
                    <p>{{ component.description }}</p>
                  </div>
                  <div class="component-controls">
                    <label class="checkbox-label">
                      <input 
                        type="checkbox" 
                        v-model="component.enabled"
                        @change="updateDashboardComponent(component.id)"
                      >
                      <span>显示</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加/编辑管理员弹窗 -->
      <div v-if="showAdminModal" class="modal-overlay" @click="closeAdminModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ editingAdmin ? '编辑管理员' : '添加管理员' }}</h3>
            <button class="close-button" @click="closeAdminModal">&times;</button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="saveAdmin">
              <div class="form-group">
                <label>用户名 *</label>
                <input 
                  type="text" 
                  v-model="currentAdmin.username" 
                  required 
                  :disabled="editingAdmin && editingAdmin.isDefault"
                  placeholder="请输入用户名"
                />
              </div>
              <div class="form-group">
                <label>密码 *{{ editingAdmin ? '（留空不修改）' : '' }}</label>
                <input 
                  type="password" 
                  v-model="currentAdmin.password" 
                  :required="!editingAdmin"
                  placeholder="请输入密码"
                />
              </div>
              <div class="form-group" v-if="!editingAdmin">
                <label>确认密码 *</label>
                <input 
                  type="password" 
                  v-model="confirmPassword"
                  required
                  placeholder="请再次输入密码"
                />
              </div>
              <div class="form-group" v-if="!editingAdmin || !editingAdmin.isDefault">
                <label class="checkbox-label">
                  <input 
                    type="checkbox" 
                    v-model="currentAdmin.active"
                  >
                  <span>启用账号</span>
                </label>
              </div>
              <div class="modal-actions">
                <button type="button" class="secondary-button" @click="closeAdminModal">
                  取消
                </button>
                <button type="submit" class="primary-button">
                  {{ editingAdmin ? '保存修改' : '添加' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 删除确认弹窗 -->
      <div v-if="showDeleteConfirm" class="modal-overlay" @click="closeDeleteConfirm">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>确认删除</h3>
            <button class="close-button" @click="closeDeleteConfirm">&times;</button>
          </div>
          <div class="modal-content">
            <p>确定要删除此管理员账号吗？此操作不可撤销。</p>
            <div class="modal-actions">
              <button type="button" class="secondary-button" @click="closeDeleteConfirm">取消</button>
              <button type="button" class="delete-button" @click="deleteAdmin">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import SettingsStore from '../../services/SettingsStore';
import AdminLayout from './AdminLayout.vue';

export default {
  name: 'SettingsManagement',
  components: {
    AdminLayout
  },
  data() {
    return {
      activeTab: 'language',
      availableLanguages: [
        { code: 'zh-CN', name: 'Chinese', nativeName: '简体中文' },
        { code: 'en-US', name: 'English', nativeName: 'English' },
        { code: 'fr-FR', name: 'French', nativeName: 'Français' },
        { code: 'de-DE', name: 'German', nativeName: 'Deutsch' },
        { code: 'es-ES', name: 'Spanish', nativeName: 'Español' },
        { code: 'ja-JP', name: 'Japanese', nativeName: '日本語' }
      ],
      currentLanguage: 'zh-CN',
      adminAccounts: [],
      showAdminModal: false,
      editingAdmin: null,
      currentAdmin: {
        username: '',
        password: '',
        active: true,
        isDefault: false
      },
      confirmPassword: '',
      showDeleteConfirm: false,
      adminToDelete: null,
      dashboardBackgroundColor: '#ffffff',
      darkMode: false,
      dashboardComponents: [
        { id: 'stats', title: '统计概览', description: '显示销售、订单等核心统计数据', enabled: true },
        { id: 'recent-orders', title: '最近订单', description: '显示最近的订单列表', enabled: true },
        { id: 'popular-products', title: '热门产品', description: '显示最受欢迎的产品', enabled: true },
        { id: 'traffic', title: '访问统计', description: '显示网站访问数据', enabled: true },
        { id: 'quick-links', title: '快捷操作', description: '常用管理功能的快捷入口', enabled: true }
      ]
    };
  },
  mounted() {
    this.loadSettings();
  },
  methods: {
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab;
    },

    // 加载系统设置
    loadSettings() {
      // 加载语言设置
      const language = SettingsStore.getCurrentLanguage();
      if (language) {
        this.currentLanguage = language;
      }

      // 加载管理员账号
      this.adminAccounts = SettingsStore.getAdministrators();

      // 加载仪表盘设置
      const dashboardSettings = SettingsStore.getDashboardSettings();
      if (dashboardSettings) {
        this.dashboardBackgroundColor = dashboardSettings.backgroundColor || '#ffffff';
        this.darkMode = dashboardSettings.darkMode || false;
        
        // 更新组件配置
        if (dashboardSettings.components) {
          this.dashboardComponents.forEach(component => {
            const savedComponent = dashboardSettings.components.find(c => c.id === component.id);
            if (savedComponent !== undefined) {
              component.enabled = savedComponent.enabled;
            }
          });
        }
      }
    },

    // 更改系统语言
    changeLanguage(languageCode) {
      this.currentLanguage = languageCode;
      SettingsStore.setLanguage(languageCode);
      // 这里可以添加语言切换的提示或刷新逻辑
    },

    // 打开添加管理员弹窗
    openAddAdminModal() {
      this.editingAdmin = null;
      this.currentAdmin = {
        username: '',
        password: '',
        active: true,
        isDefault: false
      };
      this.confirmPassword = '';
      this.showAdminModal = true;
    },

    // 打开编辑管理员弹窗
    openEditAdminModal(admin) {
      this.editingAdmin = admin;
      this.currentAdmin = {
        ...admin,
        password: '' // 清空密码，避免显示
      };
      this.confirmPassword = '';
      this.showAdminModal = true;
    },

    // 关闭管理员弹窗
    closeAdminModal() {
      this.showAdminModal = false;
      this.editingAdmin = null;
      this.currentAdmin = {
        username: '',
        password: '',
        active: true,
        isDefault: false
      };
      this.confirmPassword = '';
    },

    // 保存管理员账号
    saveAdmin() {
      // 验证密码一致性
      if (!this.editingAdmin && this.currentAdmin.password !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }

      // 保存管理员账号
      if (this.editingAdmin) {
        // 更新现有管理员
        // 在实际应用中，这里应该更新管理员密码
        if (this.currentAdmin.password) {
          const adminToUpdate = this.adminAccounts.find(a => a.username === this.currentAdmin.username);
          if (adminToUpdate) {
            SettingsStore.updateAdministratorPassword(adminToUpdate.id, this.currentAdmin.password);
          }
        }
      } else {
        // 添加新管理员
        const result = SettingsStore.addAdministrator(this.currentAdmin.username, this.currentAdmin.password);
        if (!result.success) {
          alert(result.message);
          return;
        }
      }

      // 重新加载管理员列表
      this.loadSettings();
      this.closeAdminModal();
    },

    // 确认删除管理员
    confirmDeleteAdmin(admin) {
      this.adminToDelete = admin;
      this.showDeleteConfirm = true;
    },

    // 关闭删除确认弹窗
    closeDeleteConfirm() {
      this.showDeleteConfirm = false;
      this.adminToDelete = null;
    },

    // 删除管理员
    deleteAdmin() {
      if (this.adminToDelete && this.adminToDelete.id) {
        const result = SettingsStore.deleteAdministrator(this.adminToDelete.id);
        if (result.success) {
          this.loadSettings();
        } else {
          alert(result.message);
        }
      }
      this.closeDeleteConfirm();
    },

    // 更新仪表盘背景颜色
    updateDashboardBackgroundColor() {
      SettingsStore.updateDashboardBackgroundColor(this.dashboardBackgroundColor);
      // 这里可以添加实时更新背景色的逻辑
    },

    // 切换暗黑模式
    toggleDarkMode() {
      this.darkMode = !this.darkMode;
      SettingsStore.toggleDarkMode(this.darkMode);
      // 这里可以添加实时切换暗黑模式的逻辑
    },

    // 更新仪表盘组件设置
    updateDashboardComponent(componentId) {
      // 在这个简单实现中，我们只是切换组件的启用状态
      SettingsStore.toggleComponent(componentId);
    }
  }
};
</script>

<style scoped>
/* 统一管理页面容器样式 */
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 统一标题头部样式 */
.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-description {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 标签切换容器 */
.tab-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.tab-button {
  padding: 12px 24px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  margin: 0 8px;
}

.tab-button:hover {
  color: #4CAF50;
}

.tab-button.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
}

/* 内容区域 */
.content-wrapper {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.section-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* 语言选项 */
.language-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.language-option {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.language-option:hover {
  border-color: #4CAF50;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

.language-option.active {
  border-color: #4CAF50;
  background-color: #f1f8e9;
}

.language-icon {
  margin-right: 12px;
  color: #4CAF50;
}

.language-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.language-info p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* 管理员账号 */
.admin-accounts {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.admin-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.admin-item:last-child {
  border-bottom: none;
}

.admin-item.header {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-size: 14px;
  color: #333;
}

.default-badge {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.admin-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.active {
  background-color: #4CAF50;
}

.status-indicator.inactive {
  background-color: #f44336;
}

.admin-actions {
  display: flex;
  gap: 8px;
}

/* 仪表盘设置 */
.dashboard-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setting-group label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.color-picker {
  display: flex;
  gap: 12px;
  align-items: center;
}

.color-picker input[type="color"] {
  width: 40px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
}

.color-picker input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.dashboard-components {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.component-item {
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s;
}

.component-item.disabled {
  opacity: 0.6;
}

.component-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.component-info p {
  font-size: 12px;
  color: #666;
  margin: 0 0 12px 0;
}

.component-controls {
  display: flex;
  justify-content: flex-end;
}

/* 按钮样式 */
.primary-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.primary-button:hover {
  background-color: #45a049;
}

.secondary-button {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.secondary-button:hover {
  background-color: #e0e0e0;
}

.danger-button, .delete-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.danger-button:hover, .delete-button:hover {
  background-color: #d32f2f;
}

.danger-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s;
}

.close-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #4CAF50;
}

.form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-container {
    padding: 15px;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .tab-container {
    flex-wrap: wrap;
  }

  .tab-button {
    margin: 4px;
  }

  .content-wrapper {
    padding: 16px;
  }

  .admin-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-item.header {
    display: none;
  }

  .language-options,
  .dashboard-components {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions button {
    width: 100%;
  }
}
</style>